<template>
  <div class="ticket-list-container">
    <h2 class="page-title">我的电子票</h2>
    
    <div class="ticket-list">
      <el-empty v-if="tickets.length === 0 && !loading" description="暂无电子票记录" />
      
      <div class="ticket-grid" v-else>
        <el-card v-for="ticket in tickets" :key="ticket.id" class="ticket-card" shadow="hover">
          <div class="ticket-header">
            <el-tag :type="getTicketStatusType(ticket.status)" class="status-tag">
              {{ getTicketStatusText(ticket.status) }}
            </el-tag>
          </div>
          
          <div class="ticket-body">
            <div class="event-info">
              <h3 class="event-name">{{ ticket.eventName }}</h3>
              <p class="event-time">{{ formatDateTime(ticket.eventStartTime) }} ~ {{ formatDateTime(ticket.eventEndTime) }}</p>
              <p class="event-location">{{ ticket.eventVenue }}</p>
            </div>
            
            <div class="ticket-info">
              <div class="ticket-type">{{ ticket.ticketTypeName }}</div>
              <div class="ticket-no">{{ ticket.ticketCode }}</div>
              <div class="ticket-price">票价: ¥{{ (ticket.price / 100).toFixed(2) }}</div>
            </div>
            
            <div class="ticket-qrcode" v-if="ticket.status === 0">
              <div class="ticket-code-display">
                <div class="ticket-code">{{ ticket.ticketCode }}</div>
              </div>
            </div>
            
            <div class="ticket-used" v-else-if="ticket.status === 1">
              <el-result icon="success" title="已使用" sub-title="该票券已被使用" />
            </div>
            
            <div class="ticket-cancelled" v-else-if="ticket.status === 3">
              <el-result icon="error" title="已取消" sub-title="该票券已被取消" />
            </div>
          </div>
          
          <div class="ticket-footer">
            <el-button size="small" @click="viewTicketDetail(ticket.id)">查看详情</el-button>
          </div>
        </el-card>
      </div>
    </div>
    
    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        v-model:currentPage="queryParams.page"
        v-model:pageSize="queryParams.size"
        :page-sizes="[8, 16, 24, 32]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getMyTickets } from '@/api/order'

const router = useRouter()

// 查询参数
const queryParams = reactive({
  page: 1,
  size: 8,
  keyword: '',
  status: ''
})

// 票券列表
const tickets = ref([])
// 总记录数
const total = ref(0)
// 加载状态
const loading = ref(false)

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '未设置'
  
  // 处理ISO格式的日期字符串
  const dateObj = new Date(dateTimeStr)
  return dateObj.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-')
}

// 获取电子票列表
const fetchTickets = async () => {
  loading.value = true
  try {
    const res = await getMyTickets(queryParams)
    console.log('电子票列表响应:', res)
    
    if (res.code === 200 && res.data) {
      if (res.data.records) {
        tickets.value = res.data.records
        total.value = res.data.total || 0
      } else if (Array.isArray(res.data)) {
        tickets.value = res.data
        total.value = res.data.length || 0
      } else {
        tickets.value = []
        total.value = 0
      }
      console.log('处理后的电子票列表:', tickets.value)
    } else {
      ElMessage.error(res.msg || '获取电子票列表失败')
    }
  } catch (error) {
    console.error('获取电子票列表出错:', error)
    ElMessage.error('获取电子票列表失败')
  } finally {
    loading.value = false
  }
}

// 每页条数变化
const handleSizeChange = (size) => {
  queryParams.size = size
  fetchTickets()
}

// 页码变化
const handleCurrentChange = (page) => {
  queryParams.page = page
  fetchTickets()
}

// 查看票券详情
const viewTicketDetail = (ticketId) => {
  router.push({
    path: '/front/user/ticket-detail',
    query: { id: ticketId }
  })
}

// 获取电子票状态类型
const getTicketStatusType = (status) => {
  switch (status) {
    case 0: return 'success' // 未使用
    case 1: return 'info' // 已使用
    case 3: return 'danger' // 已取消
    default: return 'info'
  }
}

// 获取电子票状态文本
const getTicketStatusText = (status) => {
  switch (status) {
    case 0: return '未使用'
    case 1: return '已使用'
    case 3: return '已取消'
    default: return '未知状态'
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchTickets()
})
</script>

<style scoped>
.ticket-list-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
  color: #303133;
}

.ticket-list {
  margin-bottom: 20px;
}

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.ticket-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ticket-header {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}

.status-tag {
  font-size: 12px;
}

.ticket-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-info {
  margin-bottom: 15px;
}

.event-name {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
}

.event-time, .event-location {
  margin: 5px 0;
  font-size: 14px;
  color: #606266;
}

.ticket-info {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.ticket-type {
  font-weight: bold;
  margin-bottom: 5px;
}

.ticket-no {
  font-family: monospace;
  color: #606266;
}

.ticket-price {
  margin-top: 5px;
  color: #f56c6c;
  font-weight: bold;
}

.ticket-qrcode {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.ticket-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.ticket-code {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  letter-spacing: 1px;
  user-select: all;
}

.ticket-footer {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 